<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>消息更新修复测试</title>
    <style>
      body {
        font-family: Arial, sans-serif;
        max-width: 800px;
        margin: 0 auto;
        padding: 20px;
      }
      .test-section {
        border: 1px solid #ddd;
        margin: 20px 0;
        padding: 20px;
        border-radius: 8px;
      }
      .message {
        padding: 10px;
        margin: 10px 0;
        border-radius: 5px;
      }
      .user-message {
        background-color: #e3f2fd;
        border-left: 4px solid #2196f3;
      }
      .ai-message {
        background-color: #f3e5f5;
        border-left: 4px solid #9c27b0;
      }
      button {
        background-color: #4caf50;
        color: white;
        padding: 10px 20px;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        margin: 5px;
      }
      button:hover {
        background-color: #45a049;
      }
      .log {
        background-color: #f5f5f5;
        padding: 10px;
        border-radius: 5px;
        font-family: monospace;
        white-space: pre-wrap;
        max-height: 300px;
        overflow-y: auto;
      }
    </style>
  </head>
  <body>
    <h1>消息更新修复测试</h1>

    <div class="test-section">
      <h2>问题描述</h2>
      <p><strong>原始问题：</strong></p>
      <ul>
        <li>update message 没有生效，需要改成 messageIndex - 1 才能生效</li>
        <li>更新的是用户输入的信息，但想要更新的是AI响应信息</li>
      </ul>

      <p><strong>根本原因：</strong></p>
      <ul>
        <li>使用数组索引更新消息容易出错，特别是在动态添加消息的场景下</li>
        <li>消息添加顺序和索引计算不一致</li>
        <li>没有明确区分要更新的是用户消息还是AI消息</li>
      </ul>
    </div>

    <div class="test-section">
      <h2>修复方案</h2>
      <p><strong>解决方案：</strong></p>
      <ul>
        <li>使用消息ID而不是数组索引来更新消息</li>
        <li>在添加AI消息占位符时保存其ID</li>
        <li>通过消息ID精确定位并更新AI消息内容</li>
        <li>添加新的mutation: UPDATE_MESSAGE_BY_ID</li>
      </ul>
    </div>

    <div class="test-section">
      <h2>修复后的代码逻辑</h2>
      <pre><code>// 1. 添加用户消息
const userMessage = {
  id: Date.now(),
  role: 'user',
  content: content,
  createTime: new Date().toISOString(),
}
store.commit('ADD_MESSAGE', userMessage)

// 2. 添加AI消息占位符，保存ID
const aiMessageId = Date.now() + 1
let aiMessage = {
  id: aiMessageId,
  role: 'assistant',
  content: '正在思考...',
  createTime: new Date().toISOString(),
}
store.commit('ADD_MESSAGE', aiMessage)

// 3. 在流式响应中使用ID更新AI消息
store.commit('UPDATE_MESSAGE_BY_ID', {
  messageId: aiMessageId,
  content: fullResponse,
})</code></pre>
    </div>

    <div class="test-section">
      <h2>新增的Store Mutation</h2>
      <pre><code>UPDATE_MESSAGE_BY_ID(state, { messageId, content }) {
  const messageIndex = state.messages.findIndex(msg => msg.id === messageId)
  if (messageIndex !== -1) {
    state.messages[messageIndex].content = content
    state.messages = [...state.messages] // 强制响应式更新
    console.log('消息已通过ID更新，ID:', messageId, '索引:', messageIndex)
  } else {
    console.warn('未找到指定ID的消息:', messageId)
  }
}</code></pre>
    </div>

    <div class="test-section">
      <h2>修复效果</h2>
      <ul>
        <li>✅ 不再依赖数组索引，避免索引计算错误</li>
        <li>✅ 精确定位AI消息，确保更新的是AI响应而不是用户输入</li>
        <li>✅ 使用消息ID更可靠，即使消息数组发生变化也不受影响</li>
        <li>✅ 添加了详细的日志，便于调试和监控</li>
      </ul>
    </div>

    <div class="test-section">
      <h2>测试建议</h2>
      <ol>
        <li>启动前端应用，进入聊天界面</li>
        <li>开启打字机效果，发送一条消息</li>
        <li>观察AI消息是否正确显示"正在思考..."然后逐步更新为实际响应</li>
        <li>检查浏览器控制台日志，确认消息更新过程</li>
        <li>验证用户消息内容保持不变，只有AI消息内容在更新</li>
      </ol>
    </div>

    <script>
      // 模拟测试
      console.log('消息更新修复测试页面已加载')
      console.log('请在实际应用中测试修复效果')
    </script>
  </body>
</html>
